<!--
 * @Description: 攻略
 -->
<template>
  <div class="app-main">
    <div class="w-full bg grid-list layout-min-full-height d-flex">
      <div>
        <!--四条攻略-->
        <div class="featured-posts mb-6">
          欢迎！<span>{{ userInfo.userName }}</span>
        </div>
        <!--四条攻略END-->
        <!--全部数据START-->
        <div class="d-flex">
          <div class="flex">
            <div class="app-content-header mb-5">
              <div class="main-title">
                <h5 class="fs-24 fw-600 i-con-h-a">
                  <router-link :to="{ path: '/user/addstrategy' }">
                    发布攻略
                  </router-link>
                </h5>
                <h5 class="fs-24 fw-600 i-con-h-a">
                  已发布的攻略
                  <span class="text-muted fs-13 v-1 ml-1">({{ total }})</span>
                </h5>
              </div>
            </div>

            <!--具体攻略-->
            <div v-for="item in glList" :key="item.pid">
              <router-link style="background-color: #fff" :to="{ path: '/gl/details', query: { glPid: item.pid }}"
                           class="post-item white delay-0 list-animation-leftIn">
                <img :src=item.imgPath v-if="item.imgPath" class="post-item__preview delay-4"></img>
                <div v-else class="post-item__preview align-items-center d-flex delay-0"
                     style="background:linear-gradient(#ec468b80,#e36c34a6,#a09b02cc);">
                  <h3 class="flex text-center text-white opacity-50">NOPIC</h3>
                </div>
                <div class="post-item__content">
                  <h3 :title=item.title>{{ item.title }}</h3>
                  <div class="post-meta">
                    <div class="category category--tools">
                      推荐必去
                    </div>
                    <div class="post-meta__avatars">
                      <img src="https://static.facebstore.com/public/uploads/_/originals/g9sqh9gp.jpeg" class="avatar">
                    </div>
                    <div class="post-meta__info fw-600">
                      <span>飞猫</span>
                      <span>•</span>
                      <span>2022-03-11</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="CS CS--lg">
                    <button class="comment"><i class="icon-bubble"></i></button>
                    <p class="CS-count">
                      103
                    </p>
                    <button class="share"><i class="icon-share"></i></button>
                  </div>
                </div>
              </router-link>

            </div>
            <!--具体攻略END-->
            <!--分页组件-->
            <el-pagination
              class="el-pagination-gl"
              :page-size=5
              @current-change="handleCurrentChange"
              :pager-count=pagerCount
              layout="prev, pager, next"
              :total=total>
            </el-pagination>
            <!--分页组件END-->
          </div>
          <!--评论区START-->
          <div class="ml-6 w-380 d-md-none d-lg-none d-xl-block">
            <div class="d-block siderbar-apps new-post">
              <div class="siderbar-apps__header"><h4 class="fs-24 fw-600 mb-0">我的留言</h4></div>
              <div class="siderbar-apps__body mh-500">
                <div class="el-loading-mask" style="display: none;">
                  <div class="el-loading-spinner">
                    <svg viewBox="25 25 50 50" class="circular">
                      <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                    </svg>
                  </div>
                </div>
                <!--具体评论-->
                <div class="siderbar-apps__body-item bg bt-1 pt-4 hover-shadow-5">
                  <a target="_blank"
                     href="/article/office-for-macos-install"
                     class="fs-14 opacity-50 text-truncate mb-3 d-block hover-opacity-normal">皇家胜地-避暑山庄</a>
                  <p class="article-comment-quote fs-15"><span
                    style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 3;">
                    很好的攻略，建议在推荐几处景点哈
                  </span></p>
                  <div class="d-flex align-items-center">
                    <div class="mr-3">
                    </div>
                    <div class="d-flex flex-column flex-grow-1"><p class="d-flex title fw-400 fs-14 text-ellipsis mb-0">
                      <span class="flex">老李</span> <span class="d-flex justify-content-end align-items-center"><small
                      class="text-muted">2021-12-24</small></span></p></div>
                  </div>
                </div>
                <!--具体评论END-->
                <!--分页组件-->
                <el-pagination
                  class="el-pagination-gl"
                  :page-size=5
                  @current-change="handleCurrentChange"
                  :pager-count=pagerCount
                  layout="prev, pager, next"
                  :total=total>
                </el-pagination>
                <!--分页组件END-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
      product_search: "", // 搜索条件
      total: 0, // 攻略总量
      pageSize: 10, // 每页显示的攻略数量
      glCateGory: "", //攻略分类
      current: 1,
      pagerCount: 5,
      glList: [],
      glActivityStatus: 1,
      userInfo: "",
    };
  },
  activated() {
    this._getGl_(1)
    this._getGlCateGory_()
    this.userInfo = JSON.parse(this.$store.getters['catUser/getUser'])
  },
  methods: {
    _getGlCateGory_() {
      this.$axios
        .post("/cat/glCategory/glCategoryList", {
          limit: "3",
        })
        .then((res) => {
          this.glCateGory = res.data.glList.list;
        })
        .catch((err) => {
          console.log("error");
          return Promise.reject(err);
        });
    },
    glChange(glActivityStatus) {
      this.current = 1
      // console.log("攻略切换", glActivityStatus);
      this._getGl_(glActivityStatus);
      this.glActivityStatus = glActivityStatus
    },
    // 获取各类攻略数据方法封装
    _getGl_(categoryPid) {
      this.$axios
        .post("/cat/glInfo/glList", {
            categoryPid: categoryPid,
            limit: "3",
            page: this.current,
            userPid: this.userInfo.Pid
          }
        )
        .then((res) => {
          this.glList = res.data.glPage.list
          this.size = res.data.glPage.pageSize;
          this.total = res.data.glPage.totalCount;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this._getGl_(this.glActivityStatus)
    },
  }
};
</script>

<style scoped>
@import "../../assets/css/gl.css";
/*@import "https://static.konlonair.com/macwk-client/css/7343d4b.css";*/
</style>
